<template>
  <div class="evaluateDetail">
    <span>详情</span>
    <img class="closeImg"
         src="../../../assets/img/close.png"
         @click="closeAdd"
         alt="">
    <el-table :highlight-current-row="true"
              border
              :header-cell-style="{ background: '#f5f5f5' }"
              :data="detailList.list">
      <el-table-column type="index"
                       label="序号"
                       sortable
                       align="center"
                       width="80"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="person_name"
                       label="被评价人员"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="分值"
                       show-overflow-tooltip
                       prop="score"
                       align="center">
      </el-table-column>
      <el-table-column label="开始日期"
                       prop="start_date"
                       align="center">
      </el-table-column>
      <el-table-column label="接收日期"
                       show-overflow-tooltip
                       prop="end_date"
                       align="center">
      </el-table-column>
      <el-table-column prop="evaluator_phone"
                       label="评价人员手机号"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作"
                       fixed="right"
                       width="200px"
                       align="center">
        <template slot-scope="scope">
          <el-button type="text"
                     @click="check(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="handlePageChange"
                   @size-change="handleSizeChange"
                   :current-page="requestParam.page"
                   :page-size="requestParam.page_size"
                   layout="total,sizes,prev, pager, next, jumper"
                   background
                   :total="detailList.total_count"
                   align="center">
    </el-pagination>
  </div>
</template>

<script>
import { backEvaluateApi } from '@/services/ProjectCenter'
export default {
  data () {
    return {
      detailList: {
        list: [],
        total: 0,
        total_count: 0
      },
      requestParam: {
        assessee_data_id: '',
        is_page: 1,
        page: 1,
        page_size: 10
      },

    }
  },
  created () {
    this.requestParam.assessee_data_id = this.$route.query.dataId
    this.getDeatilList()
  },
  mounted () { },
  methods: {
    getDeatilList () {
      backEvaluateApi.getEvaluateDetailList({
        params: this.requestParam
      }).then((res) => {
        if (res.code === 0) {
          this.detailList = res.data
        }
      }).catch(err => {
        console.log(err);
      })
    },
    closeAdd () {
      this.$router.push({ path: '\ActivityManagement', query: { activeType: 'look' } })
    },
    handlePageChange (val) {
      this.requestParam.page = val
      this.getDeatilList()
    },
    handleSizeChange (val) {
      this.requestParam.page_size = val
      this.getDeatilList()
    },
    check (row) {
      // { path: '\checkCommonQuestionList', query: { types: "check", exerciseId: row.exercise_id, exerciseName: row.exercise_name } }
      this.$router.push({
        // path: '\checkCommonQuestionList',
        path: '/checkQuestionList1',
        query: {
          exerciseId: row.exercise_id,
          types: "detail", phones: row.evaluator_phone,
          dataId: row.evaluator_data_id,
          evaluatePeopleId: this.requestParam.assessee_data_id,
          personName: row.person_name
        }
      })
    },
  },
  computed: {},
  watch: {}
}
</script>

<style lang="scss" scoped>
.evaluateDetail {
  padding: 20px;
  span {
    font-size: 20px;
    font-weight: 500;
  }
  .el-table {
    margin-top: 20px;
  }
  .closeImg {
    width: 12px;
    float: right;
    cursor: pointer;
  }
}
</style>
